<div class="subject-page">
    <ngx-simplebar [options]="options">
        <div class="title-box">
            <div class="title">{{ exampleItem?.nickname }}</div>
            <div class="date">
                <span>更新时间：2024/6/16</span>
                <span>{{ exampleItem?.author }}</span>
                <!-- <span>源地址</span> -->
            </div>
        </div>
        <div class="content">
            <div class="left">
                <div class="description">
                    {{ exampleItem?.description }}
                </div>
                <div class="itemList">
                    @for( item of exampleItem?.examples;track $index) {
                    <div class="item">
                        <div class="name">{{item?.nickname}}</div>
                        <div class="text">{{item?.description}}</div>

                        <nz-button-group [nzSize]="'small'">
                            @if(!item.loading){
                            <button nz-button nzType="primary" [nzSize]="'small'" [disabled]="hasAnyItemLoading"
                                (click)="loadExample(item?.path)">
                                加载程序
                            </button>
                            }@else {
                            <button nz-button nzType="default" [nzSize]="'small'" nzLoading>
                                加载中...
                            </button>
                            }
                            <button nz-button [nzSize]="'small'" (click)="openUrl(item?.url)">
                                查看教程
                            </button>
                        </nz-button-group>
                    </div>
                    }
                </div>
            </div>
            <div class="right">
                <div class="author-box">
                    <!-- <div class="author">
                        <div class="avatar">
                            <img src="https://arduino.me/storage/v1/object/public/avatar/3.webp">
                        </div>
                        奈何col
                    </div>
                    <div class="text">软件作者，《Arduino程序设计基础作者》</div>
                    <div> 6 个项目</div> -->
                </div>
                <div class="author-box"></div>
                <div class="author-box"></div>
            </div>
        </div>
    </ngx-simplebar>
</div>